<template>
  <div class="settings">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="menu-card">
          <el-menu
            :default-active="activeMenu"
            class="settings-menu"
            @select="handleMenuSelect"
          >
            <el-menu-item index="general">
              <el-icon><Setting /></el-icon>
              <span>基本设置</span>
            </el-menu-item>
            <el-menu-item index="model">
              <el-icon><Monitor /></el-icon>
              <span>模型配置</span>
            </el-menu-item>
            <el-menu-item index="notification">
              <el-icon><Bell /></el-icon>
              <span>通知设置</span>
            </el-menu-item>
            <el-menu-item index="about">
              <el-icon><InfoFilled /></el-icon>
              <span>关于系统</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card class="content-card">
          <!-- 基本设置 -->
          <div v-show="activeMenu === 'general'">
            <h2>基本设置</h2>
            <el-form :model="generalForm" label-width="120px" class="settings-form">
              <el-form-item label="系统名称">
                <el-input v-model="generalForm.systemName" />
              </el-form-item>
              <el-form-item label="主题色">
                <el-color-picker v-model="generalForm.theme" />
              </el-form-item>
              <el-form-item label="语言">
                <el-select v-model="generalForm.language">
                  <el-option label="中文" value="zh" />
                  <el-option label="English" value="en" />
                </el-select>
              </el-form-item>
              <el-form-item label="时区">
                <el-select v-model="generalForm.timezone">
                  <el-option label="(GMT+8:00) 北京" value="Asia/Shanghai" />
                  <el-option label="(GMT+0:00) 伦敦" value="Europe/London" />
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <!-- 模型配置 -->
          <div v-show="activeMenu === 'model'">
            <h2>模型配置</h2>
            <el-form :model="modelForm" label-width="120px" class="settings-form">
              <el-form-item label="预测模型">
                <el-select v-model="modelForm.model">
                  <el-option label="模型 A" value="model_a" />
                  <el-option label="模型 B" value="model_b" />
                </el-select>
              </el-form-item>
              <el-form-item label="训练周期">
                <el-input-number v-model="modelForm.trainCycle" :min="1" :max="100" />
                <span class="unit">天</span>
              </el-form-item>
              <el-form-item label="批处理大小">
                <el-input-number v-model="modelForm.batchSize" :min="32" :max="512" :step="32" />
              </el-form-item>
              <el-form-item label="学习率">
                <el-slider
                  v-model="modelForm.learningRate"
                  :min="0.0001"
                  :max="0.1"
                  :step="0.0001"
                  :format-tooltip="value => value.toFixed(4)"
                />
              </el-form-item>
            </el-form>
          </div>

          <!-- 通知设置 -->
          <div v-show="activeMenu === 'notification'">
            <h2>通知设置</h2>
            <el-form :model="notificationForm" label-width="120px" class="settings-form">
              <el-form-item label="邮件通知">
                <el-switch v-model="notificationForm.emailEnabled" />
              </el-form-item>
              <el-form-item label="通知邮箱" v-if="notificationForm.emailEnabled">
                <el-input v-model="notificationForm.email" />
              </el-form-item>
              <el-form-item label="通知类型">
                <el-checkbox-group v-model="notificationForm.types">
                  <el-checkbox label="预测完成">预测完成</el-checkbox>
                  <el-checkbox label="模型训练">模型训练</el-checkbox>
                  <el-checkbox label="系统警告">系统警告</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>

          <!-- 关于系统 -->
          <div v-show="activeMenu === 'about'">
            <h2>关于系统</h2>
            <div class="about-content">
              <p><strong>系统版本：</strong> v1.0.0</p>
              <p><strong>更新日期：</strong> 2024-03-20</p>
              <p><strong>技术支持：</strong> support@example.com</p>
              <el-divider />
              <h3>系统信息</h3>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="运行环境">Production</el-descriptions-item>
                <el-descriptions-item label="框架版本">Vue 3.0</el-descriptions-item>
                <el-descriptions-item label="Node版本">v18.0.0</el-descriptions-item>
                <el-descriptions-item label="操作系统">Windows Server</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>

          <!-- 底部按钮 -->
          <div class="form-actions" v-if="activeMenu !== 'about'">
            <el-button type="primary" @click="handleSave">保存设置</el-button>
            <el-button @click="handleReset">重置</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Setting, Monitor, Bell, InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const activeMenu = ref('general')

const handleMenuSelect = (key) => {
  activeMenu.value = key
}

// 基本设置表单
const generalForm = ref({
  systemName: '时序预测系统',
  theme: '#409EFF',
  language: 'zh',
  timezone: 'Asia/Shanghai'
})

// 模型配置表单
const modelForm = ref({
  model: 'model_a',
  trainCycle: 7,
  batchSize: 64,
  learningRate: 0.001
})

// 通知设置表单
const notificationForm = ref({
  emailEnabled: false,
  email: '',
  types: ['预测完成', '系统警告']
})

// 保存设置
const handleSave = () => {
  ElMessage.success('设置已保存')
}

// 重置设置
const handleReset = () => {
  ElMessage.warning('设置已重置')
}
</script>

<style scoped>
.settings {
  padding: 20px;
}

.menu-card {
  margin-bottom: 20px;
}

.settings-menu {
  border-right: none;
}

.content-card {
  min-height: 500px;
}

.settings-form {
  max-width: 600px;
  margin-top: 20px;
}

.form-actions {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.unit {
  margin-left: 10px;
  color: #666;
}

.about-content {
  padding: 20px 0;
}

.about-content p {
  margin: 10px 0;
  line-height: 1.6;
}

h2 {
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

h3 {
  margin: 20px 0;
}
</style> 